<template>
    <div class="city">
        <cityheader />
        <search :cities="cities" />
        <citylist :cities="cities" :hotcities="hotcities" :letter="letter" />
        <alphabet :cities="cities" @change="handleletterChange" />
    </div>
</template>

<script>
import cityheader from "../components/city/cityheader.vue";
import Search from "../components/city/search.vue";
import citylist from "../components/city/list.vue";
import Alphabet from "../components/city/alphabet.vue";
import { cityjson } from "@/api/cityjson";
export default {
    name: "City",
    components: { cityheader, Search, citylist, Alphabet },
    data() {
        return {
            cities: {},
            hotcities: [],
            letter:'',
        };
    },
    methods: {
        getCityInfo() {
            cityjson().then((res) => {
                this.cities = res.data.total.cities;
                this.hotcities = res.data.total.hotcities;
            });
        },
        handleletterChange(letter) {
            this.letter=letter
            console.log(letter,1);
        },
    },
    mounted() {
        this.getCityInfo();
    },
};
</script>

<style lang="scss" scoped>
</style>